<template>
  <div class="e10_container">
    <div style="height:15px;">
      仪表盘学习
    </div>
    <div
      ref="echart"
      class="echart_container"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let charts = this.$echarts.init(this.$refs['echart']);
    let option = {
      series: [
        {
          type: 'gauge', //定义类型为【仪表盘】
          detail: {
            formatter: '{value}%',
          },
          min: 10,
          max: 130,
          data: [
            {
              value: 50,
              name: '百分比',
              itemStyle: {
                color: 'red',
              },
              title: {
                show: true, //显示标题
              },
              detail: {
                show: false, //去掉中心展示数值
              },
            },
            {
              value: 30,
              itemStyle: {
                color: 'blue',
              },
              detail: {
                show: false, //去掉中心展示数值
              },
            },
          ],
        },
      ],
    };
    charts.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.e10_container {
  height: 100%;
  .echart_container {
    height: calc(100% - 15px);
  }
}
</style>